<template>
<div class="hot">
    <h3><span>TOP 10</span>  热门文章</h3>
    <ul>
            <li v-for="(list,index) in res" :key="list.id">
                <router-link to="">
                    <span :class="{ orange: index < 3 }">{{ index + 1}}</span>
                    {{ list.title }}
                </router-link>
            </li>
    </ul>
</div>
</template>

<script>
 let resData = [{
     "id":"1",
     "title": "PHP学科:MySQL手册免费分享"
 },
 {
     "id":"2",
     "title": "这是第一篇文章"
 },
 {
     "id":"3",
     "title": "想少走弯路,就看看这个贴:"
 },
 {
     "id":"4",
     "title": "前端必学框架Bootstrap,3天带你"
 },
 {
     "id":"5",
     "title": "PHP进阶:要想提高PHP编程效率"
 },
 {
     "id":"6",
     "title": "最涨薪PHP项目—PHP微信公众平台"
 }
 ]
 export default {
     data() {
         return {
             res:resData
         }
     }
 }
</script>

<style scoped>
.hot{
    background: #fff;
}
ul{
    padding: 0;
    list-style: none;
}
a{
    color: #666666;
    text-decoration: none;
     font-size: 14px;
     line-height: 40px;
}
.orange{
    color: orange;
}
.hot h3 span{
    color: #ff6600;
    font-style: italic
}
</style>